<template>
    <div class="content-box" style="padding-top: 0px;">
      <div class="head">
        <div class="addTaskTitle">
           基本配置信息
        </div>
        <div class="btn">
          <el-button type="primary" plain round size="small" icon="el-icon-edit-outline" @click="handleSubmit('formRef')">提交</el-button>
          <el-button type="danger" plain round size="small" icon="el-icon-delete" @click="handDel">删除</el-button>
        </div>
      </div>
      <div class="config_content">
       <el-form :model="form" :rules="rules" label-width="100px" ref="formRef">
        <div class="flex">
            <el-form-item label="测试方式"  style="width: 50%" prop="testType">
              <el-select 
                v-model="form.testType" 
                clearable 
                filterable 
                placeholder="请选择测试方式" 
                style="width: 100%"
                >
                <el-option
                  v-for="(item,index) in testTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
               ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item 
               v-if="form.testType && form.testType !== 1"
               label="间隔时间" prop="intervalTime" style="width: 50%">
              <el-input-number  v-model="form.intervalTime" style="width: 100%" :min="0" ></el-input-number>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="间隔时间段"  style="width: 50%" prop="dateRange">
              <el-time-picker
                is-range
                v-model="form.dateRange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="HH:mm"
                placeholder="选择时间范围"
                style="width: 100%"
              >
              </el-time-picker>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="年龄" prop="age" style="width: 50%">
             <el-input-number  v-model="form.age" style="width: 100%" :min="18" :max="75"></el-input-number>
            </el-form-item>
            <el-form-item label="学历" prop="education" style="width: 50%">
              <el-select v-model="form.education" clearable filterable placeholder="请选择学历" style="width: 100%">
                <el-option
                  v-for="(item,index) in educationList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
               ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="性别" prop="sex" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.sex">
                <el-radio v-for="(item,index) in sexList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="省市" prop="provinceOrcity" style="width: 50%">
                <el-cascader
                  ref="cascaderRef"
                  filterable
                  v-model="form.provinceOrcity"
                  v-removeAriaHidden
                  :options="addressTree"
                  :props="{
                    value: 'code',
                    label: 'name',
                    children: 'list',
                    emitPath: true,
                    checkStrictly: false,
                  }"
                  clearable
                  placeholder="请选择省市"
                  style="width: 100%"
                ></el-cascader>
            </el-form-item>
          </div>
         
          <el-form-item label="芝麻分" prop="sesame" style="margin-top: 15px">
            <el-radio-group v-removeAriaHidden v-model="form.sesame">
              <el-radio v-for="(item,index) in sesameList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="信用卡" prop="creditCard">
            <el-radio-group v-removeAriaHidden v-model="form.creditCard">
              <el-radio v-for="(item,index) in creditCardList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="社保" prop="social">
            <el-radio-group v-removeAriaHidden v-model="form.social">
              <el-radio v-for="(item,index) in socialList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公积金" prop="fund">
            <el-radio-group v-removeAriaHidden v-model="form.fund">
              <el-radio v-for="(item,index) in fundList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="京东白条" prop="baiTiao" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.baiTiao">
                <el-radio v-for="(item,index) in baiTiaoList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="花呗" prop="huaBei" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.huaBei">
                <el-radio v-for="(item,index) in huaBeiList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="职业" prop="job">
            <el-radio-group v-removeAriaHidden v-model="form.job">
              <el-radio v-for="(item,index) in jobList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="车产" prop="car">
            <el-radio-group v-removeAriaHidden v-model="form.car">
              <el-radio v-for="(item,index) in carList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="房产" prop="house">
            <el-radio-group v-removeAriaHidden v-model="form.house">
              <el-radio v-for="(item,index) in houseList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="保险保单" prop="policy">
            <el-radio-group v-removeAriaHidden v-model="form.policy">
              <el-radio v-for="(item,index) in policyList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="营业执照" prop="busLicense">
            <el-radio-group v-removeAriaHidden v-model="form.busLicense">
              <el-radio v-for="(item,index) in busLicenseList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工龄" prop="jobTime">
            <el-radio-group v-removeAriaHidden v-model="form.jobTime">
              <el-radio v-for="(item,index) in jobTimeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工资发放形式" prop="wages">
            <el-radio-group v-removeAriaHidden v-model="form.wages">
              <el-radio v-for="(item,index) in wagesList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="最低月收入" prop="minIncome" style="width: 50%">
              <el-input-number  v-model="form.minIncome" style="width: 100%" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="经营流水" prop="incomeWater" style="width: 50%">
              <el-input-number  v-model="form.incomeWater" style="width: 100%" :min="0" ></el-input-number>
            </el-form-item>
          </div>
          <el-form-item label="信用情况" prop="credit">
            <el-radio-group v-removeAriaHidden v-model="form.credit">
              <el-radio v-for="(item,index) in creditList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="贷款用途" prop="purpose">
            <el-radio-group v-removeAriaHidden v-model="form.purpose">
              <el-radio v-for="(item,index) in purposeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="贷款金额" prop="loanMoney" style="width: 50%">
              <el-input-number  v-model="form.loanMoney" style="width: 100%" :min="10000" ></el-input-number>
            </el-form-item>
            <el-form-item label="贷款期限" prop="termNum" style="width: 50%">
              <el-input-number  v-model="form.termNum" style="width: 100%" :min="1" ></el-input-number>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="客户端类型"  style="width: 50%" prop="clientType">
              <el-select v-model="form.clientType" clearable filterable placeholder="请选择客户端类型" style="width: 100%">
                <el-option
                  v-for="(item,index) in clientTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
               ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户ip" prop="ip" style="width: 50%">
              <el-input v-model="form.ip" disabled style="width: 100%" placeholder="请输入IP" clearable/>
            </el-form-item>
          </div>

      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" @click="handleSubmit('formRef')"
            >确 定</el-button
          >
      </div>
    </div>
    </div>
  </template>
  
  <script>
  import {getAreaCodeList,getAreaCodeTreeList} from '@/api/system/areaCode'
  import {
    addAutoTestConfig,
    deleteAutoTestConfig,
    getConfig

  } from '@/api/autoTest/autoTestConfig'
  export default {
    name: "AutoTestConfig",
    data() {
      return {
        form: {
            // 学历默认0
            education:0,
            // 芝麻分默认0
            sesame:0,
            // 信用卡默认0
            creditCard:0,
            // 社保默认0
            social:0,
            // 公积金默认0
            fund:0,
            // 京东白条默认0
            baiTiao:0,
            // 花呗默认0
            huaBei:0,
            // 职业信息默认1
            job:1,
            // 车产信息默认0
            car:0,
            // 房产信息默认0
            house:0,
            // 保险保单默认0
            policy:0,
            // 营业执照
            busLicense:0,
            // 工龄
            jobTime:0,
            // 工资发放形式
            wages:0,
            // 最低月收入
            minIncome:0,
            // 经营流水
            incomeWater:0,
            // 信用情况
            credit:0,
            // 贷款用途
            purpose:3,
            // 贷款金额
            loanMoney:10000,
            // 贷款期限
            termNum:3,
            // 客户端类型
            clientType:'1',
            // 用户ip
            ip:'127.0.0.1',

        },
        // 学历筛选项
        sexList:[
            {value:0,label:'女'},
            {value:1,label:'男 '},
        ],
        // 学历筛选项
        educationList:[
            {value:0,label:'无 '},
            {value:1,label:'初中'},
            {value:2,label:'高中'},
            {value:3,label:'大专'},
            {value:4,label:'本科及以上'},
            {value:5,label:'研究生及以上'}
        ],
        // 省份筛选项
        provinceCodeList:[],
        // 城市筛选项
        cityCodeList:[],
        // 芝麻分筛选项
        sesameList:[
            {value:0,label:'无'},
            {value:1,label:'550分以下'},
            {value:2,label:'550~599'},
            {value:3,label:'600~649'},
            {value:4,label:'650~699'},
            {value:5,label:'700分以上'},
        ],
        // 信用卡筛选项
        creditCardList:[
            {value:0,label:'无'},
            {value:1,label:'2万元以内'},
            {value:2,label:'2万元以上'},
        ],
        // 社保筛选项
        socialList:[
            {value:0,label:'无'},
            {value:1,label:'6个月以下'},
            {value:2,label:'6个月及以上'},
        ],
        // 公积金筛选项
        fundList:[
            {value:0,label:'无'},
            {value:1,label:'未满6个月'},
            {value:2,label:'6个月及以上'},
        ],
        // 京东白条筛选项
        baiTiaoList:[
           {value:0,label:'无'},
           {value:1,label:'有'},
        ],
        // 花呗筛选项
        huaBeiList:[
           {value:0,label:'无'},
           {value:1,label:'有'},
        ],
        // 职业信息筛选项
        jobList:[
            {value:1,label:'自由职业者'},
            {value:2,label:'上班族'},
            {value:3,label:'公务员/事业/国企'},
            {value:4,label:'企业主'},
            {value:5,label:'个体户'},
        ],
        // 车产信息筛选项
        carList:[
            {value:0,label:'无'},
            {value:1,label:'按揭车'},
            {value:2,label:'全款车'},
        ],
        // 房产筛选项
        houseList:[
            {value:0,label:'无'},
            {value:1,label:'按揭房产'},
            {value:2,label:'全款房产'},
        ],
        // 保险保单筛选项
        policyList:[
            {value:0,label:'无'},
            {value:1,label:'1年以内'},
            {value:2,label:'1年以上'},
        ],
        // 营业执照筛选项
        busLicenseList:[
            {value:0,label:'无'},
            {value:1,label:'两年以下'},
            {value:2,label:'两年以上'},
        ],
        // 工龄筛选项
        jobTimeList:[
            {value:0, label:'无'},
            {value:1, label:'0-6个月'},
            {value:2, label:'6-12个月'},
            {value:3, label:'12个月以上'},
        ],
        // 工资发放形式筛选项
        wagesList:[
            {value:0,label:'无'},
            {value:1,label:'银行卡'},
            {value:2,label:'现金'},
            {value:3,label:'银行转账'},
            {value:4,label:'微信支付宝转账'},
        ],
        // 信用情况筛选项
        creditList:[
            {value:0,label:'无'},
            {value:1,label:'有逾期'},
            {value:2,label:'无逾期'},
        ],
        // 贷款用途筛选项
        purposeList:[
            {value:1,label:'购房'},
            {value:2,label:'结婚'},
            {value:3,label:'消费'},
            {value:4,label:'教育培训'},
            {value:5,label:'购车'},
            {value:6,label:'装修'},
        ],
        // 客户端类型
        clientTypeList:[
            {value:'0',label:'未知'},
            {value:'1',label:'Android'},
            {value:'2',label:'IOS'},
            {value:'3',label:'PC'},
        ],
        // 测试方式
        testTypeList:[
            {value:1,label:'每天'},
            {value:2,label:'间隔分钟'},
            {value:3,label:'间隔小时'},
        ],

        // 表单校验
        rules: {
          age:[
            { required: true, message: "请填写年龄", trigger: "change" },
          ],
          sex:[
            { required: true, message: "请选择性别", trigger: "blue" }
          ],
          provinceOrcity:[
            { required: true, message: "请选择省市", trigger: "change" }
          ],
          job:[
            { required: true, message: "请选择职业", trigger: "change" }
          ],
          loanMoney:[
            { required: true, message: "请填写贷款金额", trigger: "change" },
          ],
          testType:[
            { required: true, message: "请选择测试方式", trigger: "change" }
          ],
          intervalTime:[
            { required: true, message: "请填写间隔时间", trigger: "change" },
          ],
          dateRange:[
            { required: true, type: 'array', message: "请选择时间段", trigger: "change" },
          ],
        },
        // 地址级联数据
        addressTree:[],
        // 全国省市区对象形式
        areaObj:{},
      };
    },
    created() {
      this.getProvinceAndCity();
      this.getIp();// 获取ip地址
      this.getTestConfigInfo()
    },
    methods: {
      // 获取测试配置信息
      getTestConfigInfo(){
        getConfig().then(res=>{
          if(res.code == 200){
            let data = JSON.parse(JSON.stringify(res.data))
            this.$set(this,'form',{
              ...data,
              ip:this.form?.ip,
              provinceOrcity:[data?.provinceCode,data?.cityCode],
              dateRange:data?.startTime?[data?.startTime,data?.endTime]:null
            })
          }
        })
      },
      // 扁平化全国省市地址为对象形式
      flattenAreaObj(data) {
        return data.reduce((obj,pre)=>{
          // 如果存在子节点
          if(pre?.list){
            obj[pre.code] = pre.name
            obj =Object.assign({},obj,this.flattenAreaObj(pre.list))
          }else{
            obj = {...obj,...{[pre.code]:pre.name}}
          }
          return obj
        },{})
      },
      // 获取ip地址
      getIp(){
        fetch('https://ipinfo.io/json',{
            method: 'get',
            headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(response => response.json())
        .then(data => {
             this.$set(this.form,'ip',data.ip || '127.0.0.1');
         })
      },
      // 获取全国省份、城市信息
      getProvinceAndCity(){
          // 获取省份
          getAreaCodeList(1).then(res=>{
              this.provinceCodeList = res.data
          })
          // 获取级联数据
          getAreaCodeTreeList().then(res=>{
              this.addressTree = res.data
              this.areaObj = this.flattenAreaObj(res?.data);
          })
      },
      /*提交操作*/
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            // 对省份、城市名称处理
            let [provinceCode, cityCode] = params?.provinceOrcity
            params.provinceName = this.areaObj[provinceCode];
            params.cityName = this.areaObj[cityCode];
            params = {...params,provinceCode, cityCode}
            // 对间隔时间段处理
            if (params.dateRange?.length) {
             params.startTime = params.dateRange[0];
             params.endTime = params.dateRange[1];
            } else {
              delete params.startTime;
              delete params.endTime;
            }
            addAutoTestConfig(params).then(res=>{
                if(res.code==200){
                  this.$message.success('操作成功');
                  // 重新查询刷新数据
                  this.getTestConfigInfo()
                }
            })
          }
        });
      },
      // 点击删除配置
      handDel(){
        deleteAutoTestConfig().then(res=>{
          if(res.code==200){
            this.$message.success('删除成功');
            // 重新查询刷新数据
            this.getTestConfigInfo()
          }
        })
      }
    },
  };
  </script>
  
  <style scoped lang="scss">
  .head{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding:20px 0;
    position: sticky;
    top: 0px;
    z-index: 99;
    width: 100%;
    background-color:#f4f4f5;
    .addTaskTitle{
      font-weight: 700;
      font-size: 18px;
      margin-right: 20px;
    }
    
  }
  .config_content {
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>